<template>
  <el-container style="width: 100%; height: 100%">
    <!-- 侧边栏 -->
    <el-aside width="140px">
      <div class="navigation">
        <router-link
          v-for="item in routeList"
          :key="item.path"
          :to="item.path"
          class="router-link"
          active-class="router-link-active"
        >
          {{ item.name }}
        </router-link>
      </div>
    </el-aside>
    <!-- main -->
    <el-main style="width: 100%">
      <router-view v-slot="{ Component }">
        <transition :name="transtionName">
          <component :is="Component" />
        </transition>
      </router-view>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { routeList } from './main.json';

const route = useRoute();
const routeArr = ref([]);
const transtionName = ref('slide-right');
watch(
  () => {
    return { ...route };
  },
  (to, from) => {
    const index = routeArr.value.indexOf(to.name);
    if (index != -1) {
      transtionName.value = 'slide-left';
      routeArr.value.splice(index, 1);
    } else {
      transtionName.value = 'slide-right';
      routeArr.value.push(from.name);
    }
  }
);
</script>

<style lang="less" scoped>
.navigation {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  padding-top: 24px;
  .router-link {
    display: block;
    width: 100%;
    line-height: 48px;
    color: #303133;
    font-size: 16px;
    border-left: 3px solid transparent;
    padding-left: 18px;
    transition: all 0.3s linear;
    &:hover {
      color: #409eff;
    }
  }
  .router-link-active {
    color: #409eff !important;
    background-color: #409eff30;
    border-left: 3px solid #409eff;
    font-weight: 600;
    font-size: 18px;
  }
}
</style>
